<template>
  <div class>
    <el-container>
      <el-aside>
        <div class>
          <div class="title-logo">
            <img src="@/assets/image/title.png" alt />
          </div>
          <div class="menu" v-for="(item,index) in form" :key="index">
            <div
              class
              @click="pathLeft(item.path)"
              :class="item.path == pathMenu ? 'menu-active' : ''"
            >
              <router-link :to="item.path">{{ item.meta.title }}</router-link>
            </div>
          </div>
          <div class="menu">
            <router-link to="/">文件管理</router-link>
          </div>
          <div class="menu">
            <router-link to="/">模块组件</router-link>
          </div>
          <div class="menu">
            <router-link to="/">系统管理</router-link>
          </div>
        </div>
        <div class="menu out-login" @click="outLogin">
          <a href="javascript:;">退出</a>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <div class="content">
            <template>
              <div class="son-menu" v-for="(item,index) in routerForm" :key="index">
                <div @click="pathNav(item.path)" :class="item.path == paths ? 'active' : ''">
                  <router-link :to="item.path">{{ item.meta.title }}</router-link>
                </div>
              </div>
            </template>
          </div>
          <div class="personal">
            <i class="el-icon-s-home"></i>
            <i class="el-icon-message-solid"></i>
            <span style="margin:0 20px; 0 0">|</span>
            <span>Admin</span>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script >
import * as api from '@/utils/api'
import { asyncRouter } from '@/router/contentManagement'
import {workRouter} from '@/router/workBench'
import { userRouter } from '@/router/userRights'
export default {
  name: "home",
  data () {
    return {
      routerForm: {},
      form: [],
      paths: '',
      pathMenu: ''
    }
  },
  mounted () {

  },
  created () {
    this.form = [
      workRouter,//工作台
      asyncRouter,//内容管理
      userRouter//用户权限
    ]
    this.paths = sessionStorage.getItem("z_path") || '/workBench/frontPage'
    this.pathMenu = sessionStorage.getItem("p_path") || '/workBench'
    this.pathLeft(this.pathMenu)
  },

  methods: {
    pathLeft (pathname) {
      this.pathMenu = pathname
      sessionStorage.setItem("p_path", this.pathMenu);
      if (this.pathMenu == '/workBench') {
        this.routerForm = workRouter.children
      } else if (this.pathMenu == '/content') {
        this.routerForm = asyncRouter.children
      } else if (this.pathMenu == '/userRights') {
        this.routerForm = userRouter.children
      } else {
        this.routerForm = workRouter.children
      }
    },
    pathNav (pathname) {
      this.paths = pathname
      sessionStorage.setItem("z_path", this.paths);
    }
    ,
    outLogin () {
      api.removeToken()
      this.$router.push('/login')
    }
  },
  components: {
  },
  watch: {
    $route: {
      handler (val) {
        this.paths = val.path
        sessionStorage.setItem("z_path", this.paths);
      },
      // 深度观察监听
      // deep: true
      // 配置立即执行属性
      // immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.el-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0;
  background-color: #be1015;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  height: 80px !important;
  .content {
    overflow: auto;
    display: flex;
    .son-menu {
      width: 180px;
      height: 100%;
      a {
        color: #ffffff;
        font-size: 20px;
        text-align: center;
        line-height: 80px;
        display: block;
      }
    }
    .son-menu:hover {
      transition: all 0.5s ease-in-out;
      background-color: #980b0f;
    }
    .active {
      background-color: #980b0f;
    }
  }
  .personal {
    width: 244px;
    padding: 0px 50px 0 0;
    color: #fff;
    line-height: 80px;
    i {
      font-size: 24px;
      margin-right: 20px;
    }
  }
}

.el-aside {
  overflow: hidden;
  width: 250px !important;
  display: flex;
  min-height: 100vh;
  height: 100vh;
  background-color: #666666;
  box-shadow: 5px 0px 10px rgb(0, 0, 0, 0.3);
  flex-direction: column;
  justify-content: space-between;
  .title-logo {
    height: 80px;
    img {
      width: auto;
      height: 50px;
      margin: 10px 0 0 10px;
    }
  }
  .menu {
    margin-bottom: 5px;
    width: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
    a {
      font-size: 20px;
      display: block;
      color: #fff;
    }
  }
  .menu:hover {
    background-color: #333333;
    transition: All 0.5s ease-in-out;
  }
  .menu-active {
    background-color: #333333;
  }
  .out-login {
    margin-bottom: 40px;
  }
}
.el-main {
  height: calc(100vh - 80px);
  background-color: #e4e4e4;
}
</style>
